<template>
    <div class="app">
        <!--1.0 商品列表-->
        <div class="row" v-for="(item,index) in shopcarlist">
            <div class="leftdiv">
                <mt-switch class="switch" v-model="values[index]"></mt-switch>
            </div>
            <div class="centerdiv">
                <img width="75" height="75" :src="item.thumb_path" aa="item.cou" alt="">
            </div>
            <div class="rightdiv">
                <h4>{{item.title}}</h4>
                <shopcarnumber :initcount="item.cou" :goodsid="item.id" @count="getcount"></shopcarnumber>
                <span>￥{{item.sell_price}}</span>

                <!-- <subnumber :initcount="item.count" :goodsid="item.id" class="subnumber" v-on:count="getcount"></subnumber> -->
                <a @click="del(index,item.id)">删除</a>
            </div>
        </div>

        <!--2.0 总计-->
        <div class="total">
            <div class="left">
                <h5>总计(不含运费)</h5>
                <span>已经勾选商品{{counts}}件,总价￥{{settement}}元</span>
            </div>
            <div class="right">
                <mt-button class="settm" type="danger" size="normal" @click="tosettemt">去结算</mt-button>
            </div>
        </div>

        {{values}}
    </div>
</template>

<style scoped>
    /*2.0 总计*/
    .total{
        padding: 10px;
        background-color: rgba(1,1,1,0.1);
        margin-top: 10px;
        height: 80px;
    }
    .total h5{
        color:black;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .total .left{
        width: 70%;
        float: left;
    }

    .total .right{
        width: 28%;
        float: right;
        height: 80px;
    }

    .total .settm{
        margin-top: 10px;
    }

    /*1.0 商品列表*/
    .row{
        display: flex;
        margin-top: 5px;
        border-bottom: 1px solid rgba(1,1,1,0.3);
        padding: 5px;
    }
    .row .leftdiv{
        flex: 0 0 20px;
    }
    .switch{
        margin-top: 20px;
    }
    .row .centerdiv{
        flex: 0 0 75px;
        padding: 5px;
    }

    .row .rightdiv{
        flex: 1;
    }
    .row .rightdiv h4{
        color:#0094ff;
        padding: 5px 0;
        font-size: 12px;
    }
    .row .rightdiv .subnumber{
        display: inline;
        margin: 0 10px;
    }

    .row .rightdiv span{
        color:red;
        font-size: 16px;
    }


</style>

<script>

import {getShopCar,getIdString,setItem,substrictItem,removeGoods} from '../../kits/localStorageHelper.js'
import common from '../../kits/common.js';
import shopcarnumber from '../subcomp/shopcarnumber.vue'
export default{
        components:{
            shopcarnumber
        },
        data(){
            return {
                counts:0,
                values:[],
                shopcarlist:[]               
            }
        },
        created(){
            this.getshopcarlist();
        },
        computed:{
                settement(){
                    //拿到当前已经是true的值
                    var truearr = this.values.filter(function(val){return val;});
                    //再拿到总数
                    this.counts = truearr.length;
                    //计算出总的
                    var totalAmount=0;
                    this.values.forEach((item,index)=>{
                        if(item){
                            var goodsobj = this.shopcarlist[index];
                            console.log("goodsobj:",goodsobj);
                            totalAmount+=(goodsobj.sell_price * goodsobj.cou);
                        }
                    })
                    return totalAmount
                }
            },
        methods:{
            // 只要有依赖的值发生了变化，那么当前的价格就会重新计算
            del(index,id){
                // 删除数组中的值
                this.shopcarlist.splice(index,1);
                // 重新计算当前的值
                this.values.splice(index,1);
                //删除缓存中的数据
                removeGoods(id);

            },
            tosettemt(){},
            // 获得数据
            getcount(countObj){
                // 通过判断当前的类型，如果是添加那么就往当前的数组中追加一条数据
                if(countObj.type=='add'){
                    setItem({goodsid:countObj.goodsid,count:1});
                }else{
                    //  否则就重新在缓存中删除一条数据
                    substrictItem(countObj.goodsid);
                }

            },
            getshopcarlist(){
               var ids = getIdString();
               //获得数量
              var getKey = getShopCar();

                // /api/goods/getshopcarlist/87,88,89
                var url = common.apihost + '/api/goods/getshopcarlist/'+ids;
               this.$http.get(url).then(res=>{

                    if(res.body.status !=0){
                        return alert(res.body.message);
                    }

                   
                    res.body.message.forEach(item=>{
                        item.thumb_path = common.imghost + item.thumb_path;
                        //根据key获得id数
                        item.cou =  getKey[item.id];
                        // 初始化values的数据个数
                        this.values.push(false);
               
                    })

                     this.shopcarlist = res.body.message;
                

               },res=>{
                    console.log('数据接收失败');
               })
            }
        }
    }
    
</script>

